<template>
    <div class="login"> 
        <div class="top">
            <span class="back iconfont icon--back" @click="back"></span>
            <span class="loginText">登录</span>
            <span class="home iconfont icon-shouye" @click="toHome"></span>
        </div>
        <div class="logo">
            <img class="logoImg" src="@/assets/img/logo.png" alt="">
        </div>
        <div class="phpone-pwd">
            <p class="phpone">
                <span class="iconfont icon-wode1"></span>
                <input class="iptTop" type="text" placeholder="请输入用户名" v-model="user">
            </p>
            <p class="pwd">
                <span class="iconfont icon-suo"></span>
                <input class="iptBot"  :type="password" placeholder="请输入密码" v-model="pwd">
                <span class="iconfont icon-yanjing1" @click="seepwd"></span>
            </p>

            <div class="btn" @click="btn">登录</div>
            <div class="register-find">
                <span @click="toRegister">注册账号</span>
                <span>找回密码</span>
            </div>
        </div>
       
    </div>
</template>

<script>
import { Toast } from 'vant'
    export default {
        data() {
            return {
                user:'',
                pwd:'',
                password:'password',
                num:0
                
            }
        },
        methods: {
            toRegister(){
                this.$router.push('/register')
            },
            back(){
                this.$router.back()
            },
            toHome(){
                this.$router.push('/home')
            },

            //登录
            btn(){
                const username=this.user
                const password=this.pwd
                this.$axios.post('/zhouliang/api/login/t',{
                    username,password
                })
                .then((res)=>{
                    console.log(res)
                    const {code,msg,token}=res
                    if(code==1){
                        localStorage.setItem('token',token)
                        this.$router.back()
                    }else{
                        Toast('用户名或者密码错误')
                    }
                })

            },

            seepwd(){
                
                this.num++
                if(this.num%2==1){
                    this.password='text'
                }else if(this.num%2==0){
                    this.password='password'
                }
        
            }
        },
    }
</script>

<style lang="scss" scoped>
.login{

    .top{
        height: 1rem;
        width: 100vw;
        background-color: #3ac149;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.3rem;
        color: white;

        .back,.home{
            font-size: 0.4rem; 
            padding: 0 0.3rem; 
            color: white;
        }
    }
    .logo{
        width: 100vw; 
        height: 4rem;

        .logoImg{
            width: 100%;
            height: 100%;
            // object-fit: cover;
        }
    }
    .phpone-pwd{
        background-color: #fff;
        margin: 0.3rem 0;
        .phpone{
            padding: 0.2rem 0.2rem;
            border-bottom: 1px solid rgb(243, 240, 240);
            .iconfont{
                padding-right: 0.2rem;
                font-size: 0.3rem;
            }
            .iptTop{
                width: 90%;
                border: none;
                height: 0.5rem;
            }

        }
        .pwd{
            padding: 0.2rem 0.2rem;
            border-bottom: 1px solid rgb(243, 240, 240);
            display: flex;
            align-items: center;
            .icon-suo{
                padding-right: 0.2rem;
                font-size: 0.3rem;
            }
            .iptBot{
                width: 90%;
                border: none;
                height: 0.5rem;
            }
            
        }
        .btn{
            display: flex;
            justify-content: center;
            width: 80%;
            margin: auto;
            background-color:#fafafa;
            height: 0.7rem;
            align-items: center;
            border-radius: 0.5rem;
            margin-top: 0.3rem;
        }
        .register-find{
            display: flex;
            justify-content: space-between;
            padding: 0.3rem 0.8rem;
           
        }
       
    }
    
}


</style>